<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="Publish" @tap="add()">发布作品</view>
			</block>
		</hx-navbar>
		<view style="padding: 30rpx;">
			<view class="flex align-center justify-between">
				<image src="../../static/7578.png" mode="aspectFit" style="width: 208rpx;height: 156rpx;"
					@tap="chooseAvatar"></image>
				<view class="textComment">
					<view>注:</view>
					<view>1.上传的第一张图片默认为封面图片</view>
					<view>2.上传的图片不得大于5M，格式为.jpg .png</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="flex align-center justify-between" style="width:100%;">
						<view v-for="(item,index) in ImageData" :key="index" style="position: relative;">
							<image :src="item" mode="scaleToFill"
								style="width: 198rpx;height: 134rpx;border-radius: 8rpx;margin:15rpx;"
								@tap="images(item)"></image>
							<image src="../../static/install/8011.png" mode="aspectFit"
								style="width:90rpx;height:90rpx;position: absolute;bottom:20rpx;right: 20rpx;"
								@tap="datape(index)"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flex align-center justify-between">
				<view style="color: rgba(30,30,30,0.8);font-size: 32rpx;">标题</view>
				<view class="title">
					<input type="text" placeholder="文本标题最多限制为15个字" style="margin: 20rpx 0 20rpx 10rpx;"
						v-model="publish.title">
				</view>
			</view>
			<view class="flex align-center justify-between">
				<view style="color: rgba(30,30,30,0.8);font-size: 32rpx;">内容</view>
				<view style="margin-top: 30rpx;">
					<bgyxedit @bgyxchange="getbgyxinfo" :showdone="true"
						:uploadurl="urlIndex + '/universal/uploadCloud'" filename="img" :width="564"></bgyxedit>
				</view>
			</view>
			<input style="margin: 30rpx;color: #57BFC1FF;" type="date" name="" id="" v-model="topicsIndex">
			<view class="topics" @click="getTopics(1, 10)">
				#话题
			</view>
			<view v-for="(item,index) in topicsData" :key="index" style="background-color: #FFFFFF;padding:0 30rpx;">
				<view class="flex justify-between" @click="topics(item.name,item.id) "
					style="line-height: 80rpx;border-bottom:1rpx solid rgba(30,30,30,0.07);font-size: 28rpx;">
					<text>#{{item.name}}</text>
					<text style="color: rgba(30,30,30,0.4);">23434次浏览</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import baseurl from '@/common/config.js'
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "",
					back: true,
					color: "#111111",
					rightSlot: true,
					backgroundColor: [1, "##F0F3FA"],
				},
				ImageData: [],
				publish: {
					title: '',
					concent: '',
				},
				urlIndex: '',
				Id: 0,
				topicsData: [],
				topicsIndex: []
			}
		},
		onLoad() {
			this.urlIndex = baseurl
			this.type = this.$cache.get('type')
			console.log(this.urlIndex)
		},
		methods: {
			// 话题列表
			getTopics(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.navList(data).then((res) => {
					if (num == 1) {
						this.topicsData = res.data.result.list
					} else {
						this.topicsData = this.topicsData.concat(res.data.result.list)
					}
					console.log(res.data.result.list.length, res.data.result.total)
					this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
					console.log('话题1', this.topicsData)
				})
			},
			// 选择话题
			topics(name, id) {
				this.topicsIndex = []
				this.topicsIndex.push('#' + name)
				this.Id = id
				this.topicsData = []
				console.log('话题', this.topicsIndex)
			},
			// 发布作品
			add() {
				if (this.publish.title == '') return this.$tools.showToast('标题不能为空')
				let data = {
					classificationId: this.Id,
					type: 2,
					title: this.publish.title,
					content: JSON.stringify(this.publish.concent),
					image: this.ImageData
				}
				console.log("data: ", data);
				this.$api.add(data).then((res) => {
					if (res.data.code == 0) {
						this.$tools.showToast('发布成功')
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
					console.log(res, '醋酯纤维')
				})
			},
			getbgyxinfo(e) {
				this.publish.concent = e
			},
			async chooseAvatar() {
				if (this.ImageData.length == 6) {
					uni.showLoading({
						title: '最多只能上传6张'
					})
					return uni.hideLoading();
				}
				let file = await this.$tools.chooseImg(3, 1, 6)
				if (file) {
					uni.showLoading({
						title: '上传中...'
					})
					file.forEach((item) => {
						this.uploadFile(item.path, 2)
					})
					this.$forceUpdate();
					uni.hideLoading()
					// this.$forceUpdate();
				}
			},
			datape(e) {
				this.ImageData.splice(e, 1)
				this.$forceUpdate();
			},
			images(e) {
				let arr = [e]
				uni.previewImage({
					urls: arr
				});
			},
			uploadFile(file, type) {
				uni.uploadFile({
					url: baseurl + '/universal/uploadCloudMore',
					filePath: file,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					formData: {
						'type': type
					},
					success: (res) => {
						this.ImageData.push('http://' + JSON.parse(res.data).result)
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.topics {
		width: 138rpx;
		margin: 30rpx 30rpx 30rpx 0;
		background-color: #1E1E1E1A;
		text-align: center;
		line-height: 52rpx;
		border-radius: 12rpx;
		padding: 10rpx;
	}

	.Publish {
		width: 228rpx;
		height: 80rpx;
		background: #492D22;
		border-radius: 8rpx;
		margin-right: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
	}

	.textComment {
		width: 384rpx;
		height: 184rpx;
		font-size: 28rpx;
		color: rgba(30, 30, 30, 0.6);
	}

	.title {
		width: 564rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}
</style>
